<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title>
    <!-- Load FontAwesome icons -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="./css/music.css" />
</head>

<body>
    
    <div class="container">
        <img class="bg" src="image/109951165044543784.jpg" alt="">
        <div class="strip-box">
            <img src="image/needle-ip6.png" alt="图1">
        </div>
        <div class="title-wrap pause">
            <img class="music-img" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2813440055,1849072238&fm=26&gp=0.jpg" >
        </div>
        <h2 class="title"></h2>
        <div class="play-wrap">
            <div class="prev" onclick="prevTrack()">
                <span class="icon-previous"></span>
            </div>
            <div class="play" onclick="onPlayAndPause()">
                <span class="icon-play2"></span>
            </div>
            <div class="next" onclick="nextTrack()">
                <span class="icon-next"></span>
            </div>
        </div>

        <div class="play-time">
            <span class="start-time">00:00</span>
            <input type="range" min="1" max="100" value="0" class="seek-input" onchange="seekTo()">
            <span class="end-time">00:00</span>
        </div>
    
    </div>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/music.js"></script>
</body>

</html>